<template>
  <div class="">
    <div class="taskTitlein">
      <div :class="percentage === 100 ? 'point' : 'unPoint' ">
      </div>
      <div class="myTask">
        已完成任务点：{{finishChapter}}/{{sunChapter}}
      </div>
      <div class="inTask">
        <el-progress :percentage="percentage" color="#409eff"></el-progress>
      </div>
    </div>
    <!-- 目录部分 -->
    <div class="">
      <div class="catalogue">
        目录
      </div>
      <!-- 单元列表 -->
      <div class="" v-for="(item,index) in chapterList" :key="index">
        <div class="titleN">
          <div class="catalogueTitle" @click="tuchTitle">
            <!-- 数字 -->
            <div class="myNume">
              <div class="number">
                .
              </div>
              <div class="numberIn">
                {{ item.children ? item.children.length : 0 }}
              </div>
            </div>

            <div class="titleRin">
              {{ item.title }}
            </div>
          </div>
          <!-- 小章节 -->
          <div class="miniCatalogue ">
            <div class="inMiniCatalogue">
              <div class="" v-for="(t,i) in item.children" :key="i" @click="tuchVideo(t,i,index)"
                   style="cursor: pointer;">
                <div class="smallTitle">
                  <div class="">
                    <img v-if="t.VideoRecord ? t.VideoRecord.is_pass : false " class="in22"
                         src="../../../assets/icon_yiwanc.png">
                    <img v-if="t.VideoRecord===null" class="in22" src="../../../assets/unselect.png">
                    <img v-if="t.VideoRecord ? !t.VideoRecord.is_pass : false " class="in22"
                         src="../../../assets/unselect.png">

                  </div>
                  <!--									<div :class="[item.status==1?'myDashed':'myDashedUn']"></div>-->
                  <div class="" style="margin-left: 10px">
                    {{ t.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end -->
        </div>

      </div>
      <!-- end -->
    </div>
    <!-- end -->
  </div>
</template>

<script>
let _this;
export default {
  data() {
    return {
      sunChapter: '--', //总共章节数
      finishChapter: '--', //章节完成数量
      percentage: 0, //当前进度
      userInfo: null,
      classInfo: null,
      chapterList: [],
      courseShow: false
    }
  },

  methods: {

    getChapterList: function() {
      this.$axios.post('https://vvv.52ecode.cn/api/v1.ClassChapter/index', {
        id: _this.classInfo.id,
        website_id: 1,
        user_id: _this.userInfo.id,
      }).then(res => {
        let sum = 0;
        let finish = 0;//看完视频数量
        const {data} = res;
        this.chapterList = data.data;
        data.data.forEach(item => {
          item.children.forEach(val => {
            sum++;
            if (val.VideoRecord) {
              if (val.VideoRecord.is_pass) {
                finish++;
              }
            }
          })
        })
        this.sunChapter = sum;
        this.finishChapter = finish
        if (sum === 0 && finish === 0){
          this.percentage = 0;
          return
        }
        this.percentage = parseInt((finish / sum * 100));
        if (data.data) {
          sessionStorage.setItem("chapterList", JSON.stringify(data.data))
        }
      })
    },
    tuchTitle() {
      this.courseShow = !this.courseShow
    },
    tuchVideo(t, i, index) {
      sessionStorage.setItem("chapterIndex", JSON.stringify({index: index, chapterIndex: i}))
      this.$router.push('videoplear')
    }
  },
  created() {
    _this = this;
    this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'));
    this.classInfo = JSON.parse(sessionStorage.getItem("classInfoV"))
    this.getChapterList();
  }
}
</script>

<style>
.inTask {
  margin-left: 20px;
  width: 200px;
}

.in22 {
  width: 30px;
  margin-left: -16px;
  /* margin-top: -3px; */
}

.myDashed {
  width: 60px;
  margin-top: 3px;
  border-top: 1px dashed #dadfe6;
}

.myDashedUn {
  width: 74px;
  margin-top: 3px;
  border-top: 1px dashed #dadfe6;
}

.smallTitle {
  /* background-color:#dadfe6; */
  align-items: center;
  height: 60px;
  display: flex;
}

.smallTitle:hover {
  background-color: #f7fafc;
  color: #3a8bff;
}

.inMiniCatalogue {
  margin-left: 10px;
  padding-top: 16px;
  border-left: #dadfe6 dashed 1px;
}

.miniCatalogue {
  margin-top: -16px;
  padding: 16px 40px;
}

.miniCatalogue:hover {
  animation: miniCatalogue0 5s 1;
}

@keyframes miniCatalogue0 {
  0% {
    display: none;
  }

  100% {
    display: block;
  }
}

.miniCatalogueShow {
  margin-top: -16px;
  padding: 16px 40px;
  animation: miniCatalogue1 5s 1;
}

@keyframes miniCatalogue1 {
  0% {
    display: block;
  }
  100% {
    display: none;
  }
}

.titleRin {
  font-size: 20px;
  margin-left: 20px;
}

.titleN {
}

.myNume {
  display: flex;
  align-items: center;
}

.number {
  background-color: #d0d5db;
  height: 20px;
  width: 30px;
  border-radius: 30px;
  color: #d0d5db;
}

.numberIn {
  margin-left: -10px;
  background-color: #ffffff;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 3px #d0d5db;
  color: #d0d5db;
  font-weight: bold;
  font-size: 14px;
}

.catalogueTitle {
  margin-top: 16px;
  display: flex;
  padding: 16px;
  align-items: center;
  background-color: #f5f7fa;
}

.catalogue {
  margin-top: 16px;
  margin-left: 24px;
  color: #ab9aaa;
  letter-spacing: 1pt;
}

.buk {
  width: 70px;
  margin-left: 16px;
  border-radius: 20px;
  height: 16px;
  background-color: #e8f3ff;
}

.myTask {
  margin-left: 16px;
}

.unPoint {
  width: 20px;
  height: 20px;
  background-color: #ffb04e;
  border-radius: 50%;
}
.point {
  width: 20px;
  height: 20px;
  background-color:#52cc5c;
  border-radius: 50%;
}

.taskTitlein {
  padding: 8px 24px 24px 24px;
  border-bottom: solid 1px #eaeaea;
  color: #646873;
  display: flex;
  align-items: center;
}
</style>
